<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏二级菜单</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="wrapper">
        <!-- 左边导航栏 -->
        <ul class="menu">
            <li class="menu-item">享品质</li>
            <li class="menu-item">服饰美妆</li>
            <li class="menu-item">家电手机</li>
            <li class="menu-item">电脑数码</li>
            <li class="menu-item">母婴家居</li>
            <li class="menu-item">图书汽车</li>
            <li class="menu-item">还没逛够</li>
        </ul>
        <!-- 右边内容 -->
        <div class="r-con">
            <div class="pic active">
                <img src="./banner.jpg">
            </div>
            <div class="pic con">
                <ul>
                    <li class="cons">品牌上新</li>
                    <li class="cons">超值单品</li>
                    <li class="cons">原创设计</li>
                    <li class="cons">服饰勋章</li>
                </ul>
            </div>
            <div class="pic">
                <img src="./banner.jpg">
            </div>
            <div class="pic con">
                <ul>
                    <li class="cons">电子教育</li>
                    <li class="cons">游戏极品</li>
                    <li class="cons">虚拟现实</li>
                </ul>
            </div>
            <div class="pic">
                <img src="./banner.jpg">
            </div>
            <div class="pic">
                <img src="./banner.jpg">
            </div>
            <div class="pic">
                <img src="./banner.jpg">
            </div>
        </div>
    </div>
    <script>
        let lis = document.querySelectorAll('.menu-item');
        console.log(lis);
        let pics = document.querySelectorAll('.pic');
        lis.forEach(function(item, index) {
            item.addEventListener('click', function() {
                lis.forEach(function(item, index) {
                    item.classList.remove('on')
                    pics[index].classList.remove('active')
                })
                this.classList.add('on');
                pics[index].classList.add('active')
            })
        })
    </script>
</body>

</html>